<template>
  <div id="amountBar">
  </div>
</template>

<script>
export default {
    props:['type_list'],
    data() {
        return {
        }
    },
    computed : {
            // type_list() {
            //    return this.$parent.$parent.assetData.type_list
            // }

    },
    mounted(){
        this.echartsInit()
    },
    methods:{
        //初始化echarts
	    echartsInit() {
	    	//柱形图
	    	//因为初始化echarts 的时候，需要指定的容器 id='main'
            var option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '资金配置',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: this.$parent.$parent.assetData.type_list[1][1], name: '股票型基金'},
                                {value: this.$parent.$parent.assetData.type_list[1][0], name: '债券型基金'}
                            ]
                        }
                    ]
                };
			let chart = this.$echarts.init(document.getElementById('amountBar'));
            chart.setOption(option);
            window.addEventListener('resize', function(){
                if (chart) {
                    chart.resize();
                }
            });

		}
    }
}
</script>

<style scoped>
#amountBar{
    height: 150px;
    width:300px;
    /* background:cornflowerblue; */
}
</style>